<template>
  <div>
    <q-table
      class="bg-white"
      dense
      :data="data"
      :columns="columns"
      row-key="name"
      separator="cell"
      table-class="h-custom"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="action" :props="props">
            <q-btn-dropdown
              color="blue"
              size="sm"
              dense
              menu-anchor="bottom left"
              menu-self="top left"
              content-class="text-grey"
              icon="settings">
              <q-list dense>
                <q-item clickable v-close-popup>
                  <q-item-section>
                    <q-item-label>接受</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>
                    <q-item-label>拒绝</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </q-td>
          <q-td key="type" :props="props">
            <q-chip dense square label="提醒" color="negative" text-color="white" v-if="props.row.type==='1'"/>
            <q-chip dense square label="标星" color="warning" text-color="white" v-if="props.row.type==='2'"/>
            <q-chip dense square label="会话" color="positive" text-color="white" v-if="props.row.type==='3'"/>
            <q-chip dense square label="通知" color="primary" text-color="white" v-if="props.row.type==='4'"/>
            <q-chip dense square label="广播" color="grey" text-color="white" v-if="props.row.type==='5'"/>
          </q-td>
          <q-td key="from" :props="props">{{ props.row.from }}</q-td>
          <q-td key="title" :props="props">{{ props.row.title }}</q-td>
          <q-td key="recived" :props="props">
            <q-chip dense square label="是" color="positive" text-color="white" v-if="props.row.recived==='1'"/>
            <q-chip dense square label="否" color="grey" text-color="white" v-if="props.row.recived==='2'"/>
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          type: '1',
          from: '系统管理员',
          title: '订阅到期提醒',
          recived: '2'
        },
        {
          type: '2',
          from: '系统管理员',
          title: '待办事项即将超时',
          recived: '1'
        },
        {
          type: '3',
          from: '系统管理员',
          title: '感谢您订阅我们的系统',
          recived: '1'
        },
        {
          type: '4',
          from: '系统管理员',
          title: '订阅成功通知',
          recived: '1'
        },
        {
          type: '5',
          from: '系统管理员',
          title: '为您推荐的潜在供应商',
          recived: '1'
        }
      ],
      columns: [
        {
          name: 'action',
          label: '操作',
          align: 'center'
        },
        {
          name: 'type',
          label: '类型',
          align: 'center'
        },
        {
          name: 'from',
          label: '来自',
          align: 'left'
        },
        {
          name: 'title',
          label: '标题',
          align: 'left'
        },
        {
          name: 'recived',
          label: '接受',
          align: 'center'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .h-td-maxwidth
    max-width 400px
</style>
